<template>
  <div v-loading="loading" class="chiefly-contacts">
    <flexbox v-if="contactsDetail && canShowContacts" class="cell" align="stretch">
      <xr-avatar :name="contactsDetail.name" size="40" class="cell-hd"/>
      <div class="cell-bd">
        <p class="cell-bd__name">
          <span>{{ contactsDetail.name }}</span>
          <span v-if="contactsDetail.post" class="cell-bd__name--des">{{ contactsDetail.post }}</span>
        </p>
        <p class="cell-bd__detail">
          <i class="wk wk-circle-iphone"/>
          <span v-if="contactsDetail.mobile">{{ contactsDetail.mobile }}</span>
          <span v-else class="no-data">暂无电话</span>
        </p>
        <p class="cell-bd__detail">
          <i class="wk wk-circle-email"/>
          <span v-if="contactsDetail.email">{{ contactsDetail.email }}</span>
          <span v-else class="no-data">暂无邮箱</span>
        </p>
      </div>
      <span class="mark"><i class="wk wk-s-contacts"/>首要联系人</span>
    </flexbox>

    <ImportantInfoEmpty v-else-if="!contactsId && canShowContacts"
                        :title="emptyName"
                        :btn-name="emptyBtnName"
                        class="empty-info"
                        v-bind="$attrs"/>

    <ImportantInfo v-if="list.length" :list="list" :detail="detail"/>
    <CRMFullScreenDetail v-model:visible="showFullDetail" :id="contactsId"
                         :model-data="{model: 'contacts',modelId: contactsId}"
                         crm-type="contacts"/>
  </div>
</template>

<script setup>
import {ref, useAttrs, getCurrentInstance, watch, computed, onBeforeUnmount} from "vue"
import ImportantInfo from './ImportantInfo.vue'
import ImportantInfoEmpty from './ImportantInfoEmpty.vue'
import CRMFullScreenDetail from '/src/components/CRMFullScreenDetail.vue'

import {crmContactsReadAPI} from '/src/api/crm/contacts.js'
import {filedGetInformationAPI} from '/src/api/crm/common.js'

import crmTypeModel from '/src/views/crm/model/crmTypeModel.js'
import {useErpUserStore} from "../../../../store/modules/usererp.js";

defineOptions({
  // 首要联系人
  name: 'ChieflyContacts',
})

const props = defineProps({
  id: [Number, String],
  poolId: [Number, String],
  contactsId: [Number, String],
  crmType: {
    required: true,
    type: String,
    default: ''
  },
  detail: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 是公海 默认是客户
  isSeas: {
    type: Boolean,
    default: false
  }
})
// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus


const emits = defineEmits([''])
const loading = ref(false)
const contactsDetail = ref(null)
const list = ([])
const showFullDetail = ref(false)


// 从store中拿到crm权限
const crm = computed(() => {
  const erpUserStore = useErpUserStore();
  return erpUserStore.crm
})

// 联系人权限
const canShowContacts = computed(() => {
  return crm.value && crm.value.contacts && crm.value.contacts.read
})

// 有首要联系人
const hasInfo = computed(() => {
  return props.contactsId
})

// 空数据按钮文字 为空不展示
const emptyBtnName = computed(() => {
  const attrs = useAttrs()
  // return this.$listeners.add && !props.isSeas ? '新建联系人' : ''
  return attrs.add && !props.isSeas ? '新建联系人' : ''
})

const emptyName = computed(() => {
  return (
      {
        customer: '暂无客户首要联系人',
        business: '暂无商机首要联系人'
      }[props.crmType] || '暂无数据'
  )
})

watch(props.contactsId, () => {
  contactsDetail.value = null
  getDetail()
})

watch(props.id, () => {
  list.value = []
  contactsDetail.value = null
  getBaseInfo()
  getDetail()
})

function created() {
  if (canShowContacts) {
    getDetail()
  }
  getBaseInfo()
  bus.on('crm-detail-update', (data) => {
    getBaseInfo()
  })
}

// 原来的onCreated
created();


onBeforeUnmount(() => {
  bus.off('crm-detail-update')
})


/**
 * 获取联系人详情
 */
function getDetail() {
  if (hasInfo.value) {
    loading.value = true
    crmContactsReadAPI({
      contactsId: props.contactsId
    }).then(res => {
      loading.value = false
      contactsDetail.value = res.data.data
    }).catch(() => {
      loading.value = false
    })
  }
}

/**
 * 获取基础信息
 */
function getBaseInfo() {
  loading.value = true
  const params = {
    types: crmTypeModel[props.crmType],
    id: props.id
  }

  // 如果有公海id 需上传确定展示字段
  if (props.poolId) {
    params.poolId = props.poolId
  }

  filedGetInformationAPI(params).then(res => {
    const resData = res.data.daa || []
    list.value = resData.filter(item => {
      return item.formType !== 'file' &&
          item.formType !== 'detail_table' &&
          item.formType !== 'product'
    })
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
</script>

<style lang="scss" scoped>
.chiefly-contacts {
  overflow: auto;
  height: 100%;
  padding: 15px;
  overflow-y: overlay;
}

.cell {
  padding: 12px;
  border-radius: $xr-border-radius-base;
  position: relative;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);

  &-hd {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-right: 10px;
  }

  &-bd {
    flex: 1;

    &__name {
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      margin-top: 10px;
      margin-bottom: 2px;

      &--des {
        margin-left: 5px;
        padding-left: 5px;
        color: #666666;
        font-size: 12px;
        position: relative;
        font-weight: 500;
      }

      &--des::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 0;
        bottom: 1px;
        width: 1px;
        background-color: #666;
      }
    }

    &__detail {
      font-size: 12px;
      color: #333333;
      margin-top: 8px;

      i {
        color: $xr-color-primary;
        font-size: 13px;
      }

      .no-data {
        color: #999;
      }
    }
  }

  .mark {
    position: absolute;
    top: 4px;
    right: -2px;
    z-index: 1;
  }

  .wk-phone {
    position: absolute;
    top: 30px;
    right: 5px;
    z-index: 1;
  }
}

.mark {
  display: inline-block;
  color: #fb2337;
  background-color: #fff4f4;
  font-size: 12px;
  padding: 5px;
  border-radius: $xr-border-radius-base;
  transform: scale(0.8);

  i {
    font-size: 12px;
    margin-right: 5px;
  }
}

.wk-phone {
  cursor: pointer;
  background-color: #fb9323;
  color: white;
  border-radius: $xr-border-radius-base;
  display: inline-block;
  padding: 4px 5px;
  font-size: 14px;
}

// 无数据
.empty-info {
  border-radius: $xr-border-radius-base;
  position: relative;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  height: 96px;
}
</style>
